<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:useBean id="tags" scope="session" class="com.cmpe.av.SearchPage" />

<html>

<link href="css/style.css" rel="stylesheet" type="text/css" />

<form name="dummy" action="SearchPage" method="post">

	<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {
	height: 100%
}

body {
	height: 100%;
	margin: 0;
	padding: 0
}

#map_canvas {
	height: 100%
}
</style>
<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDrrgNfqrX8_ifFLZsrvnBqE4Ne6KCpRhU&sensor=true&libraries=places">
	
</script>
<script type="text/javascript">
	function initialize() {

		var mapOptions = {
			center : new google.maps.LatLng(41.085266364561456,
					29.046590751647955),
			zoom : 16,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById("map_canvas"),
				mapOptions);
		google.maps.event.addListener(map, 'click', function(event) {
			placeMarker(event.latLng);
			document.getElementById("locationFieldLat").value = event.latLng
					.lat();
			document.getElementById("locationFieldLong").value = event.latLng
					.lng();
		});
		var input = document.getElementById('searchTextField');
		var autocomplete = new google.maps.places.Autocomplete(input);

		autocomplete.bindTo('bounds', map);

		var infowindow = new google.maps.InfoWindow({
			content : "holding..."
		});
		var marker1 = new google.maps.Marker({
			map : map
		});

		google.maps.event
				.addListener(
						autocomplete,
						'place_changed',
						function() {

							infowindow.close();
							marker1.setVisible(false);
							input.className = '';
							var place = autocomplete.getPlace();
							set_location(place);
							if (!place.geometry) {
								// Inform the user that the place was not found and return.
								input.className = 'notfound';
								return;
							}

							// If the place has a geometry, then present it on a map.
							if (place.geometry.viewport) {
								map.fitBounds(place.geometry.viewport);
							} else {
								map.setCenter(place.geometry.location);
								map.setZoom(17);
							}
							var image = new google.maps.MarkerImage(place.icon,
									new google.maps.Size(71, 71),
									new google.maps.Point(0, 0),
									new google.maps.Point(17, 34),
									new google.maps.Size(35, 35));
							marker1.setIcon(image);
							marker1.setPosition(place.geometry.location);

							var address = '';
							if (place.address_components) {
								address = [
										(place.address_components[0]
												&& place.address_components[0].short_name || ''),
										(place.address_components[1]
												&& place.address_components[1].short_name || ''),
										(place.address_components[2]
												&& place.address_components[2].short_name || '') ]
										.join(' ');
							}

							infowindow.setContent('<div><strong>' + place.name
									+ '</strong><br>' + address);
							infowindow.open(map, marker1);

						});

		function set_location(place) {

			document.getElementById("locationFieldLat").value = place.geometry.location
					.lat();
			document.getElementById("locationFieldLong").value = place.geometry.location
					.lng();

		}
		var bounds = new google.maps.LatLngBounds();
		<c:if test="${valid == true}">
		var allLat = '${allLat}';
		var allLng = '${allLng}';
		var allNames = '${allNames}';
		var allIDs = '${allIDs}';
		var allStatus = '${allStatus}';
		var reportSize = '${reportSize}';
		var latArray = allLat.split(" ");
		var lngArray = allLng.split(" ");
		var nameArray = allNames.split("---");
		var IDArray = allIDs.split("---");
		var StatusArray = allStatus.split("---");
		for ( var i = 0; i < reportSize; i++) {
			var pos = new google.maps.LatLng(latArray[i], lngArray[i]);
			bounds.extend(pos);
			if (StatusArray[i] == 0) {
				marker = new google.maps.Marker(
						{
							position : new google.maps.LatLng(latArray[i],
									lngArray[i]),
							map : map,
							draggable : false,
							icon : "images/red_MarkerD.png",
							shadow : "images/shadow.png",
							html : '<br><a href="ViewPage?qid=' + IDArray[i]
									+ '">' + nameArray[i] + '<br>'
						});
				google.maps.event
						.addListener(
								marker,
								'click',
								function() {
									infowindow
											.setContent('<div><strong><h3 text-align="center" style="text-align: center;">'
													+ this.html);
									infowindow.open(map, this);
								});
			} else if (StatusArray[i] == 1) {
				marker = new google.maps.Marker(
						{
							position : new google.maps.LatLng(latArray[i],
									lngArray[i]),
							map : map,
							draggable : false,
							icon : "images/blue_MarkerI.png",
							shadow : "images/shadow.png",
							html : '<br><a href="ViewPage?qid=' + IDArray[i]
									+ '">' + nameArray[i] + '<br>'
						});
				google.maps.event
						.addListener(
								marker,
								'click',
								function() {
									infowindow
											.setContent('<div><strong><h3 text-align="center" style="text-align: center;">'
													+ this.html);
									infowindow.open(map, this);
								});
			} else if (StatusArray[i] == 2) {
				marker = new google.maps.Marker(
						{
							position : new google.maps.LatLng(latArray[i],
									lngArray[i]),
							map : map,
							draggable : false,
							icon : "images/yellow_MarkerF.png",
							shadow : "images/shadow.png",
							html : '<br><a href="ViewPage?qid=' + IDArray[i]
									+ '">' + nameArray[i] + '<br>'
						});
				google.maps.event
						.addListener(
								marker,
								'click',
								function() {
									infowindow
											.setContent('<div><strong><h3 text-align="center" style="text-align: center;">'
													+ this.html);
									infowindow.open(map, this);
								});
			} else if (StatusArray[i] == 3) {
				marker = new google.maps.Marker(
						{
							position : new google.maps.LatLng(latArray[i],
									lngArray[i]),
							map : map,
							draggable : false,
							icon : "images/darkgreen_MarkerF.png",
							shadow : "images/shadow.png",
							html : '<br><a href="ViewPage?qid=' + IDArray[i]
									+ '">' + nameArray[i] + '<br>'
						});
				google.maps.event
						.addListener(
								marker,
								'click',
								function() {
									infowindow
											.setContent('<div><strong><h3 text-align="center" style="text-align: center;">'
													+ this.html);
									infowindow.open(map, this);
								});
			} else {
				marker = new google.maps.Marker(
						{
							position : new google.maps.LatLng(latArray[i],
									lngArray[i]),
							map : map,
							draggable : false,
							html : '<br><a href="ViewPage?qid=' + IDArray[i]
									+ '">' + nameArray[i] + '<br>'
						});
				google.maps.event
						.addListener(
								marker,
								'click',
								function() {
									infowindow
											.setContent('<div><strong><h3 text-align="center" style="text-align: center;">'
													+ this.html);
									infowindow.open(map, this);
								});
			}
		}
		if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
			var extendPoint1 = new google.maps.LatLng(bounds.getNorthEast()
					.lat() + 0.002, bounds.getNorthEast().lng() + 0.002);
			var extendPoint2 = new google.maps.LatLng(bounds.getNorthEast()
					.lat() - 0.002, bounds.getNorthEast().lng() - 0.002);
			bounds.extend(extendPoint1);
			bounds.extend(extendPoint2);
		}
		map.fitBounds(bounds);
		</c:if>

		google.maps.event.addDomListener(window, 'load', initialize);

		var marker;

		function placeMarker(location) {

			if (marker) {
				marker.setPosition(location);
			} else {
				marker = new google.maps.Marker({
					position : location,
					map : map,
					draggable : true
				});

			}
		}

	}
</script>
<script type="text/javascript">
	function handleEnter(field, event) {
		var keyCode = event.keyCode ? event.keyCode : event.which ? event.which
				: event.charCode;
		if (keyCode == 13) {
			var i;
			for (i = 0; i < field.form.elements.length; i++)
				if (field == field.form.elements[i])
					break;
			i = (i + 1) % field.form.elements.length;
			field.form.elements[i].focus();
			return false;
		} else
			return true;
	}
</script>
<script type="text/javascript">
	function validatePage() {
		var error = "";

		if (document.getElementById("user").value == "") {
			error = error + "Please enter the username.\n";
		}
		if (document.getElementById("pass").value == "") {
			error = error + "Please enter the password.\n";
		}
		if (error != "") {
			alert(error);
			return false;
		} else {
			return true;
		}
	}
</script>
	</head>


	<body background="images/background.jpg" onload="initialize()">
		<div class="header">
			<div class="wrapper">
				<div class="logo">
					<img src="images/banner.jpg" alt="" />
				</div>
				<%
					if (session.getAttribute("userName") == null) {
				%>

				<div class="login">
					<div>
						<c:if test="${invalidLogin == true}">
							<p style="color: red">
								<b>Your username or password is incorrect.</b>
							</p>

						</c:if>
					</div>
					<div class="form-input">
						<label>Username</label> <input name="name" type="text" id="user"
							value="" />
					</div>
					<div class="form-input">
						<label>Password</label> <input name="password" type="password"
							id="pass" value="" />
					</div>

					<div class="form-input">
						<input name="button" type="submit" value="Login"
							onclick="return validatePage();">
					</div>
					<div class="form-input" style="margin-right: 0">
						<input name="button" type="submit" value="Not A Member?">
					</div>


				</div>

				<%
					} else {
				%>
				<div class="login user">

					<div class="form-input" style="margin-right: 0">
						<p>
							Hi,
							<%=session.getAttribute("userName")%></p>
						<input type="submit" name="button" value="Logout" />
					</div>

				</div>

				<%
					}
				%>
			</div>


		</div>
		</div>
		<div class="content">
			<div class="wrapper">

				<div class="leftmenu">
					<ul>
						<li><a href="default.jsp">Home Page</a></li>
						<%
							if (session.getAttribute("userName") != null) {
						%>
						<li><a href="homeMember.jsp">Profile Page</a></li>
						<li><a href="addReport.jsp">Add Report</a></li>
						<%
							}
						%>
						<li><a href="searchPage.jsp">Search For a Report</a></li>

					</ul>
				</div>

				<div class="centercol">

					<h3>Search For A Report</h3>

					<c:if test="${invalid == true}">
						<p style="color: red">
							<b>At least one of the search options must be filled out.</b>
						</p>

					</c:if>
					<p>You can search reports according to location, disability
							type, status of the violation and/or tag.</p>
					<ul class="list">
						
						<li>You should specify at least one of 4 search options.</li>
						<li>Search results can be ordered according to date or rank.</li>
						<li>You can zoom in and zoom out via ‘+’ and ‘-‘ signs or
							mouse slider to pick point on the map to see reports near you.</li>
					</ul>
					<table class="report-view">
						<!-- <tr>
                	<td width="120" class="bold"><p>Location City</p></td>
                	<td width="20" class="bold">:</td>                    
                	<td width="370">
                        <select>
                            <option>Location 1</option>
                            <option>Location 2</option>
                            <option>Location 3</option>
                            <option>Location 4</option>
                            <option>Location 5</option>                                                                                              
                        </select>                    
                    </td>                    
                </tr>       -->
						<tr>
							<td><br></td>
						</tr>
						<tr>
							<td width="110" class="bold">Disability Type</td>
							<td width="20" class="bold">:</td>

							<td><select name="obstacleType">
									<option value="null">Select a Type</option>
									<option value="Blind">Blind</option>
									<option value="Wheelchair">Wheelchair</option>
									<option value="Deaf">Deaf</option>
									<option value="Other">Other</option>
							</select></td>

						</tr>
						<tr>
							<td><br></td>
						</tr>

						<tr>
							<td width="80" class="bold">Status</td>
							<td width="20" class="bold">:</td>
							<td width="250"><select name="reportStatus">
									<option value="null">Select the Status</option>
									<option value="Detected">Detected</option>
									<option value="InProgress">In progress</option>
									<option value="Fixed">Fixed</option>
									<option value="FriendlyLocation">Friendly Location</option>
							</select></td>
						</tr>

						<tr>
							<td><br></td>
						</tr>
						<tr>
							<td width="80" class="bold">Select Tags</td>
							<td width="20" class="bold">:</td>
							<td width="250"><select name="tag">
									<option value="null">Select a Tag</option>
									<c:forEach var="tg" items="${tags.tags}">
										<option value="${tg.getTagName()}">
											<c:out value="${tg.getTagName()}" />
										</option>
									</c:forEach>
							</select></td>
						</tr>
						<tr>
							<!-- lat long alır -->
							<td><input type="hidden" id="locationFieldLat"
								name="locationFieldLat" /></td>
							<td><input type="hidden" id="locationFieldLong"
								name="locationFieldLong" /></td>
						</tr>

						<tr>
							<td><input class="btn-left" type="submit" name="button"
								value="Search" /></td>
						</tr>

						<!-- <tr class="report-links">
                	<td colspan="3">
                    	<input style="float:right;margin:10px 54px 0 0" class="subs" type="submit" value="Search" />
                    </td>                    
                </tr>   -->
					</table>


				</div>

				<div class="rightcol subscribed maps">
					<h3>Location</h3>
					<p>After search, you can see related violations on the map with different colored pins for different status.</p>
					<ul class="list">
						<li>Red = Detected</li>
						<li>Blue = In Progress</li>
						<li>Yellow = Fixed</li>
						<li>Green = Friendly Location</li>
					</ul>
					
					<table>

						<tr>
							<input id="searchTextField" type="text"
								onkeypress="return handleEnter(this, event)" size="50" autofocus>
						</tr>
						<tr>
						<td>
						<br>
						</td>
						</tr>
						<tr>
							<td><div align="right" id="map_canvas"
									style="width: 420px; height: 300px"></div></td>

						</tr>
					</table>
				</div>

				<div class="clear"></div>

				<div class="search-list">
				
					<c:if test="${valid == true}">

						<h3>Search Results</h3>
						<table>


							<thead>
								<tr>
									<td width="60"><a href="SearchPage?by=1">Rank</a></td>
									<td width="75"><a href="SearchPage?by=0">Date</a></td>
									<td width="240">Report Name</td>
									<%-- <td width="160">Disability Type</td>--%>
									<td width="160">Status</td>

								</tr>
							</thead>
							<tbody>
								<ol class="b">
									<c:forEach var="report" items="${reports}">

										<tr>
											<td><a href="ViewPage?qid=${report.report_id}">${report.rate}</a></td>
											<td><a href="ViewPage?qid=${report.report_id}">${report.created_on}</a></td>
											<td><a href="ViewPage?qid=${report.report_id}">${report.reportName}</a></td>
											<%-- 	<td><a href="ViewPage?qid=${report.report_id}">Disability
													Type</a></td> --%>
											<td><a href="ViewPage?qid=${report.report_id}"> <c:if
														test="${ report.status == 0 }">Detected</c:if> <c:if
														test="${ report.status == 1 }">In Progress</c:if> <c:if
														test="${ report.status == 2 }">Fixed</c:if> <c:if
														test="${ report.status == 3 }">Friendly Location</c:if></a></td>
										</tr>

									</c:forEach>
								</ol>
							</tbody>
						</table>
						</c:if>
						<c:if test="${noReport == true}">
								<td width="150">No report found!</td>
						</c:if>
						
		
				</div>

				<div class="clear"></div>

			</div>
		</div>
		<%-- <table align = "center" cellpadding="3" cellspacing="3">
	  				<tr><!-- harita boyutu -->
		    			<td><div align="right" id="map_canvas" style="width:500px; height:500px"></div>	</td>
		    			<td valign="top"><h2>List of Reports</h2>
		    			<c:if test="${valid == true}">
		    				<p>Related Violations:</p>
							<ul class="{list-style-type:circle;}">
								<c:forEach var="report" items="${reports}">
  									<li><a href="ViewPage?qid=${report.report_id}">${report.reportName}</a></li>
  								</c:forEach>
  							</ul>
  						</c:if>					
	   				</tr>
   					</table> --%>
		</div>
	</body>
</form>
</html>